<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <style>
        .content{
            width: 300px;
            height: 450px;
            margin:0 auto;
        }
        .content img{
            display: block;
            width: 300px;
            height: 300px;
            background: skyblue;
            margin-bottom: 10px;
        }
        .content p{
            width: 300px;
            text-align: center;
            height: 20px;
            font-family: Kaiti;
            font-weight: bold;
            font-size: 20px;
        }
        .content input{
            display: block;
            width: 80px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="content">
        <img src="" alt="" width="300px" height="300px">
        <p id="name"></p>
        <input type="button" value="随机点名" onclick="bianhuan()">
    </div>
</body>
<script>
    var arr1=["何润东","刘德华","刘诗诗","刘涛","张涵予","张杰","张若昀","张雨绮","周星驰","周雨彭","胡歌","刘亦菲","娜扎","杨幂","张含韵","张靓颖","赵丽颖","周冬雨","熊希霖","范冰冰"];
    // 数组长度为20
    function bianhuan(){
        var ran1=Math.round(Math.random()*100);  //生成50以内的随机数 
        ran1+=20; // 至少循环一轮
        console.log(ran1);
        var num=0;
        var inte=setInterval(function(){
            var img1=document.getElementsByTagName("img")[0];
            var p1=document.getElementsByTagName('p')[0];
            var imgName=arr1[num%20];
            img1.src="./imgs/"+imgName+".png";
            p1.innerHTML=imgName;
            if(num==ran1){
                clearInterval(inte);
            }
            num++;
        },100);
    }
</script>
</html>